<template>
	<view class="container">

		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<u-navbar z-index="9999" title="搜索店铺" back-icon-color="#000" :is-back="true" title-color="#000" :background="{ background:'#FFF2E2'}" :border-bottom="true"></u-navbar>
		<!-- #endif -->


		<view class="Search_box2">
			<view class="Search_wrap">
				<u-search width="100%" style="width: 100%;" placeholder="寻找好店" :clearabled="false" height="80" bgColor="#ffffff" v-model="keyword" :show-action="false" @search="Startsearch" @change="inputChange" @focus="JuJiao"></u-search>
			</view>
		</view>




		<view class="search-keyword" v-if="!isShowKeywordList">
			<scroll-view class="keyword-box" scroll-y>
				<view class="keyword-block" v-if="oldKeywordList.length>0">
					<view class="keyword-list-header">
						<view>历史搜索</view>
						<view style="color: #9E9E9E;" @tap="oldDelete">清空</view>
					</view>
					<view class="keyword">
						<view v-for="(keyword,index) in oldKeywordList" @tap="doSearch(keyword)" :key="index">
							{{keyword}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>


		<view v-else>
			<!--筛选-->
			<!-- <uv-sticky bgColor="#ffffff" :z-index="999" offsetTop="0" customNavHeight="0">
				<view class="screen_box">
					<FilterComponents ref="popupRef" @clickZhiDing="zhiding" @CancelShopSstatus="CancelShopSStatus" @onSelected='onSelected' @Cancelstatus='AvailableChange'></FilterComponents>
				</view>
			</uv-sticky> -->
			
			<!--店铺列表-->
			<view class="lanjiazai" v-if="skeletonLoading">
				<view>
					<view class="loading_icon">
						<image :src="BestImgUrl + 'loading.gif'" class="loading_gif"></image>
					</view>
					<view class="tag">加载中...</view>
				</view>
			</view>
			<view v-else>
				<view class="shop_list_wrap u-skeleton" v-if="shopsLists.length != 0">
					
					<home-shops-list ref="" :shopList="shopsLists"></home-shops-list>
					
					<view class="chudijiazai">
						<u-loadmore icon-type="flower" :status="loadingstatus" font-size="24" :load-text="loadText" />
						<view v-if="Bottomingrefresh == true" class="Bottomingrefresh" @click="RefreshBtn()">立即刷新</view>
					</view>
			
				</view>
				<view v-else-if="shopsLists.length == 0 && failTimeOutShow == false" class="noData_box">
					<image src="/static/images/noData.png" mode="widthFix"></image>
					<view>暂无店铺</view>
				</view>
				<view v-else-if="failTimeOutShow == true && shopsLists.length == 0" class="noData_box">
					<image src="/static/images/Frame33412.png" mode="widthFix"></image>
					<view class="timeOut">
						<view>网络好像出问题了~</view>
						<view @click="refurbish()">立即刷新</view>
					</view>
				</view>
			</view>
		</view>
    <!-- 客服教程 -->
    <view v-show="isGoTop" class="server_box" >
      <!--<view @click="openService" class="help">
        <image :src="`https://td.lszbg.com/public/uploads/h5/home/kefu.png`" mode="widthFix" style="height:33rpx;width:33rpx"></image>
        <view style="color: #323232;font-size: 18rpx;">客服</view>
      </view>-->
      <!--<view style="height: 10rpx"></view>-->
      <!--<view
          @click="toNewUser" class="help">
        <image :src="`https://td.lszbg.com/public/uploads/h5/home/new_user.png`" mode="widthFix" style="height:33rpx;width:33rpx"></image>
        <view style="color: #323232;font-size: 18rpx;">教程</view>
      </view>-->
      <!--<view style="height: 10rpx"></view>-->
      <view @click="goTop" class="scrollToTop">
        <image :src="`https://td.lszbg.com/public/uploads/h5/home/top.png`" mode="widthFix" style="height:38rpx;width:38rpx"></image>
      </view>
    </view>
		
		
		
		
		

	</view>
</template>

<script>
	const app = getApp();
  import store from "@/public/store";
	export default {
		components: {
			
		},
		data() {
			return {
				navTitle: '搜索套餐',
				navbackground: {
					backgroundImage: 'linear-gradient(90deg, #FE7B20, #FE7B20)'
				},
				ifmember: 0,
				available: false,
				keyword: '',
				enable: true,
				shopsLists: [],
				pageSize: 1,
				pageNum: 10,
				BestImgUrl: app.globalData.imgurlBwc,
				skeletonLoading: true,

				Bottomingrefresh: false,
				loadingstatus: 'nomore',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '加载中...',
					nomore: '没有更多了'
				},
				failTimeOutShow: false,

				category_id: '',
				iforderable: 0,
				order_By: 1,
				shopsType: '',
				is_shop_type: '',
				
				noonTip: '',
				noonTipAm: false,
				noonTipPm: false,
				
				
				defaultKeyword: "",
				oldKeywordList: [],
				hotKeywordList: [],
				keywordList: [],
				forbid: '',
				isShowKeywordList: false,
        isGoTop: false, //显示返回顶部按钮

			};
		},
		//下拉刷新
		onPullDownRefresh() {
			let that = this
			setTimeout(function() {
				that.pageSize = 1
				that.pageNum = 10
				that.skeletonLoading = true
				that.failTimeOutShow = false
				that.GetShopslist()
				uni.stopPullDownRefresh();
			}, 1500);
		},
		//触底加载
		onReachBottom() {
			let that = this
			this.loadingstatus = 'loading';
			that.loadText.nomore = '没有更多了'
			that.Bottomingrefresh = false
			setTimeout(function() {
				that.pageSize++;
				that.GetShopslist()
				uni.hideNavigationBarLoading()
			}, 500);
		},
		onLoad(ops) {
			let that = this
			that.keyword = ops.keys
			that.navTitle = ops.title || '搜索套餐'
			that.category_id = ops.categoryID || ''
			
			uni.removeStorageSync('YzCps_P')

			//获取商家列表
			that.GetShopslist()
			
			this.loadOldKeyword();
		},
		onShow() {
			this.Getmember()
		},
		onHide() {
			
		},
    onPageScroll(e) {
      let that = this
      console.log('页面滚动高度', e.scrollTop)
      // 获取页面滚动高度
      that.isGoTop = e.scrollTop > 10;

    },
		methods: {
			//加载历史搜索,自动读取本地Storage
			loadOldKeyword() {
				uni.getStorage({
					key: 'OldKeys',
					success: (res) => {
						var OldKeys = JSON.parse(res.data);
						this.oldKeywordList = OldKeys;
					}
				});
			},
			//清除历史搜索
			oldDelete() {
				uni.showModal({
					content: '确定清除历史搜索记录？',
					success: (res) => {
						if (res.confirm) {
							this.oldKeywordList = [];
							uni.removeStorage({
								key: 'OldKeys'
							});
						} else if (res.cancel) {
						}
					}
				});
			},
			//保存关键字到历史记录
			saveKeyword(keyword) {
				uni.getStorage({
					key: 'OldKeys',
					success: (res) => {
						var OldKeys = JSON.parse(res.data);
            var findIndex = OldKeys.indexOf(keyword);
						if (findIndex == -1) {
							OldKeys.unshift(keyword);
						} else {
							OldKeys.splice(findIndex, 1);
							OldKeys.unshift(keyword);
						}
						//最多10个纪录
						OldKeys.length > 10 && OldKeys.pop();
						uni.setStorage({
							key: 'OldKeys',
							data: JSON.stringify(OldKeys)
						});
						this.oldKeywordList = OldKeys; //更新历史搜索
					},
					fail: (e) => {
						var OldKeys = [keyword];
						uni.setStorage({
							key: 'OldKeys',
							data: JSON.stringify(OldKeys)
						});
						this.oldKeywordList = OldKeys; //更新历史搜索
					}
				});
			},
			//执行搜索
			doSearch(keyword) {
				let that = this
				
				keyword = keyword === false ? this.keyword : keyword;
				this.keyword = keyword;
				this.saveKeyword(keyword); //保存为历史
				this.isShowKeywordList = true
				that.pageSize = 1
				that.skeletonLoading = true
				that.GetShopslist()
        setTimeout(() => {
          that.isGoTop = true
        }, 1000)
			},
			Startsearch(e){
      // console.log('回车搜索了',e)
				let that = this
				if(!e){

				} else {
          console.log( e)
					this.saveKeyword(e); //保存为历史
					this.isShowKeywordList = true
					that.pageSize = 1
					that.skeletonLoading = true
					that.GetShopslist()
          setTimeout(() => {
            that.isGoTop = true
          }, 1000)
				}
			},
			//监听输入
			inputChange(event) {
				//兼容引入组件时传入参数情况
				var keyword = event.detail ? event.detail.value : event;
				if (!keyword) {
					this.keywordList = [];
					this.isShowKeywordList = false;
					return;
				}
			},
			JuJiao(){
				this.isShowKeywordList = false;
			},
			
			//刷新重试商家列表
			refurbish() {
				let that = this
				that.failTimeOutShow = false
				that.skeletonLoading = true
				that.loadingstatus = 'nomore'
				that.Bottomingrefresh = false
				that.pageSize = 1
				that.pageNum = 10
				setTimeout(() => {
					that.GetShopslist()
				}, 2000)

			},
			//触底加载中的刷新
			RefreshBtn() {
				let that = this
				that.loadingstatus = 'loading'
				that.loadText.nomore = '没有更多了'
				that.Bottomingrefresh = false
				that.GetShopslist()
			},
			//获取会员信息判断显示折扣
			Getmember() {
				let that = this
				let urerinfo = uni.getStorageSync('userinfo')
				that.ifmember = urerinfo.is_member
			},
			//获取店铺列表
			GetShopslist() {
				let that = this
				let lat = uni.getStorageSync('lat')
				let lon = uni.getStorageSync('lng')
				let CityName = uni.getStorageSync('CityName')
				let Province = uni.getStorageSync('Province')
				
				uni.request({
					url: store.state.baseUrl + '/api/package/lists',
					data: {
						page: that.pageSize,
						province: Province,
						city: CityName,
						limit: that.pageNum,
						lat: lat,
						lng: lon,
						order_by: that.order_By, //排序：默认1综合排序、2实付最少、3距离最近、4返贴最多、5名额最多
						keyword: that.keyword
					},
					method: "POST",
					header: {
						'Content-Type': 'application/json',
						'authorization': uni.getStorageSync('token')
					},
					timeout: 6000,
					success: (res) => {
						console.log('店铺列表',res.data.result)
						
						if(res.data.result == '请先获取定位') {
							that.shopsLists = []
							//that.GetShopslist()
							
							that.skeletonLoading = false
						}else {
							
							that.failTimeOutShow = false
							that.loadText.nomore = '没有更多了'
							that.Bottomingrefresh = false
							
							if (that.pageSize != 1) {
								if (res.data.result.length != 0) {
									that.loadingstatus = 'loading';
									that.shopsLists = that.shopsLists.concat(res.data.result)
								} else {
									that.loadingstatus = 'nomore'
								}
							} else {
								that.shopsLists = res.data.result
								that.loadingstatus = 'nomore'
							}

							that.skeletonLoading = false
							
							// this.$nextTick(() => {
							// 	this.$u.getRect('.shop_list_wrap').then(rect => {
							// 		console.log('列表节点',rect.top);
							// 	})
							// })
							
						}
						
					},
					fail: (err) => {
						if (!err.data) {
							//不存在就是访问超时或者接口错误
							//console.log('请求错误或请求超时', err.errMsg)
						
							that.skeletonLoading = false
						
							////console.log('多少',that.loadingstatus)
							if (that.loadingstatus == 'loading') {
						
								that.loadingstatus = 'nomore'
								that.loadText.nomore = '网络好像出问题了~'
								that.Bottomingrefresh = true
						
							} else {
								that.shopsLists = []
						
								that.loadingstatus = 'loading'
								that.loadText.nomore = '没有更多了'
								that.Bottomingrefresh = false
						
								that.failTimeOutShow = true
							}
						
						
						} else {
							uni.showToast({
								title: err.data.msg,
								icon: 'none',
								duration: 2000
							});
						}
					}
				});
			},
			
			
			//点击搜索
			Tosearch() {
				let that = this
				that.pageSize = 1
				that.skeletonLoading = true
				that.GetShopslist()
			},
			
			//只看可抢(开关)
			AvailableChange(e) {
				let that = this
				that.$refs.popupRef.tapMask()
				that.zhiding()
				
				that.order_By = ''
				that.shopsType = ''
				that.category_id= ''
				
				that.pageSize = 1
				that.skeletonLoading = true
				that.failTimeOutShow = false
				
				if (e == true) {
					that.iforderable = 1
					that.pageSize = 1
					setTimeout(() => {
						that.GetShopslist()
					}, 1000)
				} else if (e == false) {
					that.iforderable = 0
					that.pageSize = 1
					setTimeout(() => {
						that.GetShopslist()
					}, 1000)
				}
				
			},
			//筛选类型
			CancelShopSStatus(e){
				console.log('筛选店铺类型',e)
				let that = this
				
				that.order_By = ''
				that.shopsType = ''
				that.category_id= ''
				
				that.is_shop_type = e
				
				that.pageSize = 1
				that.skeletonLoading = true
				that.failTimeOutShow = false
				
				setTimeout(() => {
					that.GetShopslist()
				}, 1000)
				
			},
			//点击综合排序
			onSelected(res) {
				console.log('筛选确定按钮',res)
				
				let that = this
				that.order_By = res.order_By
				that.shopsType = res.shopsType
				that.category_id = res.category_id
				
				that.pageSize = 1
				that.skeletonLoading = true
				that.failTimeOutShow = false
				
				setTimeout(() => {
					that.GetShopslist()
					that.zhiding()
				}, 1000)
				
			},
			//置顶
			zhiding() {
				// #ifdef MP-WEIXIN || APP-PLUS
				let navH = 100 + uni.getSystemInfoSync().statusBarHeight
				// #endif
				
				// #ifdef H5
				let navH = 44 + uni.getSystemInfoSync().statusBarHeight
				// #endif
				
				uni.createSelectorQuery().select('.shop_list_wrap').boundingClientRect(data => { //目标位置的节点：类class或者id
					
					uni.createSelectorQuery().select(".container").boundingClientRect(res => { //最外层盒子的节点：类class或者id
						
							uni.pageScrollTo({
								duration: 100, //过渡时间
								scrollTop: data.top +- res.top - navH,//到达距离顶部的top值
							})
						}).exec()
						
				}).exec();
			},
      // 返回顶部
      goTop() {
        console.log('返回顶部')
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 500
        })
      },
			
		}
	}
</script>

<style lang="scss">
	//@import "@/pages/index/index.scss";
	
	page {
		background-color: #F8F4F3;
	}

	image {
		vertical-align: bottom;
	}

	.noData_box {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		
		margin-top: 0;
		//padding-top: 80rpx;
		padding-bottom: 260rpx;
		text-align: center;
		color: #999;
		text-align: center;
	
		image {
			width: 240rpx;
			height: 240rpx;
		}
	
		.timeOut {
			font-size: 12px;
			color: #666;
			margin: 0px 0px 7px;
			display: flex;
			align-items: center;
			justify-content: center;
	
			view:nth-child(2) {
				color: #00acfd;
				padding-left: 10rpx;
			}
		}
	
		.lijipay {
			width: 30%;
			position: relative;
			margin: 0 auto;
	
			.u-size-default {
				background-image: linear-gradient(to left, #FF971E, #FF971E) !important;
				height: 70rpx !important;
				line-height: 70rpx !important;
			}
	
			.tologon_btn {
				border-radius: 200rpx;
				color: #fff;
				height: 70rpx !important;
				line-height: 70rpx !important;
				background-image: linear-gradient(to left, #FF971E, #FF971E) !important;
			}
		}
	}

	.shop_list_wrap {
		padding: 11px 0 0 0;
	}

	.s_page_wrap {
		padding: 0 25rpx 10rpx 25rpx;
	}

	.Search_box2 {
		padding: 14rpx 25rpx 14rpx 25rpx;
		flex-direction: row;
		display: flex;
		align-items: center;
		background-color: #FFF2E2;

		.Search_wrap {
			position: relative;
			flex-direction: row;
			flex: 1;
			display: flex;

			.Search_btn {
				position: absolute;
				z-index: 99;
				right: 8rpx;
				top: 4px;
				color: #ffffff;
				background-image: linear-gradient(to right, #FF9619, #FFB930);
				width: 150rpx;
				height: 65rpx;
				text-align: center;
				line-height: 65rpx;
				border-radius: 200rpx;
			}
		}
	}
	
	.search-keyword {
		width: 100%;
		background-color: rgb(242, 242, 242);
	}
	
	.keyword-list-box {
		height: calc(100vh - 110upx);
		padding-top: 10upx;
		border-radius: 0 0 0 0;
		background-color: #fff;
	}
	
	.keyword-entry-tap {
		background-color: #eee;
	}
	
	.keyword-entry {
		width: 100%;
		height: 80upx;
		padding: 0 3%;
		font-size: 30upx;
		color: #333;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: solid 1upx #e7e7e7;
	}
	
	.keyword-entry image {
		width: 60upx;
		height: 60upx;
	}
	
	.keyword-entry .keyword-text,
	.keyword-entry .keyword-img {
		height: 80upx;
		display: flex;
		align-items: center;
	}
	
	.keyword-entry .keyword-text {
		width: 90%;
	}
	
	.keyword-entry .keyword-img {
		width: 10%;
		justify-content: center;
	}
	
	.keyword-box {
		height: calc(100vh - 110upx);
		border-radius: 0 0 0 0;
		background-color: #fff;
	}
	
	.keyword-box .keyword-block {
		padding: 10upx 0;
	}
	
	.keyword-box .keyword-block .keyword-list-header {
		width: 100%;
		padding: 10upx 3%;
		font-size: 24upx;
		color: #333;
		display: flex;
		justify-content: space-between;
	}
	
	.keyword-box .keyword-block .keyword-list-header image {
		width: 40upx;
		height: 40upx;
	}
	
	.keyword-box .keyword-block .keyword {
		width: 100%;
		padding: 3px 3%;
		display: flex;
		flex-flow: wrap;
		justify-content: flex-start;
	}
	
	.keyword-box .keyword-block .hide-hot-tis {
		display: flex;
		justify-content: center;
		font-size: 24upx;
		color: #6b6b6b;
	}
	
	.keyword-box .keyword-block .keyword>view {
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 60upx;
		padding: 0 20upx;
		margin: 10upx 20upx 10upx 0;
		height: 60upx;
		font-size: 24upx;
		background-color: rgb(242, 242, 242);
		color: #6b6b6b;
	}
  //  客服css
  .server_box {
    position: fixed;
    right: 10rpx;
    bottom: 26%;
    z-index: 100;
    border-radius: 50%;

    .icon {
      width: 38rpx;
      height: 38rpx;
    }

    .text {
      font-size: 20rpx;
      color: #333;
    }
  }
  //帮助css
  .help {
    min-height: 70rpx;
    min-width: 70rpx;
    background-color: #fdfdfd;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3rpx 6rpx rgba(0, 0, 0, 0.3);
    border-radius: 100rpx;
  }
  /* 返回顶部 */
  .scrollToTop{
    min-height: 70rpx;
    min-width: 70rpx;
    background-color: #fdfdfd;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3rpx 6rpx rgba(0, 0, 0, 0.3);
    border-radius: 100rpx;
  }
</style>